<template>
	<view>
		<scroll-view scroll-y class="page">
			<view class="home-bg-img">
				<image src="../../static/tabimg/home.png"
				 mode="widthFix" class="response">
				 </image>
				 <view class="home-info">
				 	<view class="">热轧智联工厂</view>
					<view class="">提升企业信息化成效</view>
					<view class="">改变管理模式，提升管理效率</view>
					<view class="">关键信息自动推送，提升决策效率</view>
				 </view>
				 <view class="home-new">
				 	<view class="home-new-info">
				 		<view class="home-new-info-title">最新通告</view>
						<view class="home-new-info-line"></view>
						<view class="home-new-info-contont">{{this.$store.state.info == null ? '暂无公告': this.$store.state.info.body +' '+ this.$store.state.info.time}}</view>
				 	</view>
				 </view>
				 <view class="ph-shezhi home-set"></view>
			</view>
			
			<view class="padding-lr-30 padding-t grid">
				<navigator hover-class="none" :url="item.pagePath" navigateTo class="text-center padding-b"
				 v-for="(item,index) in elements" :key="index" style="width: 25%;">
					<text :class="['ph-' + item.cuIcon, item.color]" class="font-size50 margin-b-15"></text>
					<view class="u-font-weight7 u-Text-block7 font-size24">{{item.title}}</view>
				</navigator>
			</view>
			
			<!-- 产量统计 -->
			<view class="u-main">
				<view class="u-main-title u-font-weight8">
					<text>产量统计</text>
					<text class="ph-gengduoxiangqing text-blue" style="font-size: 30upx;" @tap="goTeamPage"></text>
				</view>
				<view class="u-main-line"></view>
				<view class="u-main-info">
					<view class="u-flex">
						<view class="chan-item" v-for="(item, index) in chanList" :key="index">
							<view class="chan-item-title u-font-weight">{{item.title}}</view>
							<view class="chan-item-value u-font-weight">{{item.value}}</view>
							<view class="chan-item-name">{{item.unit}}</view>
							<view class="chan-item-value u-font-weight">{{item.blocks}}</view>
							<view class="chan-item-name">轧制块数(块)</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 库存统计 -->
			<view class="u-main">
				 <swiper style="height: 400upx;" :indicator-dots="true" indicator-active-color="#3088F4">
					<swiper-item>
						<view class="">
							<view class="u-main-title u-font-weight8">
								<text>成品库存</text>
								<text class="ph-gengduoxiangqing text-blue" style="font-size: 30upx;" @tap="goStockPage"></text>
							</view>
							<view class="u-main-line"></view>
							<view class="u-main-info">
								<view class="dashed-bottom padding-tb-30">
									<view class="flex">
										<view class="pei-250">
											<u-charts
											 :canvas-id="stockState.id" 
											 :chartType="stockState.chartType"
											 :cWidth="stockState.cWidth" 
											 :cHeight="stockState.cHeight" 
											 :title="stockState.title"
											 :extra="stockState.extra"
											 :opts="stockState.opts"
											 :ref="stockState.id" />
										</view>
										<view class="width100 margin-tb-auto">
											<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,index) in stockList" :key="index">
												<view class="basic-default">{{item.classification}}</view>
												<view class="basis-sm">{{item.tonnes}}万吨</view>
												<view class="basic-default">{{item.percentage}}%</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="">
							<view class="u-main-title u-font-weight8">
								<text>原料库存</text>
								<text class="ph-gengduoxiangqing text-blue" style="font-size: 30upx;" @tap="goYuanliaoPage"></text>
							</view>
							<view class="u-main-line"></view>
							<view class="u-main-info">
								<view class="dashed-bottom padding-tb-30">
									<view class="flex">
										<view class="pei-250">
											<u-charts
											 :canvas-id="slabPie.id" 
											 :chartType="slabPie.chartType"
											 :cWidth="slabPie.cWidth" 
											 :cHeight="slabPie.cHeight" 
											 :title="slabPie.title"
											 :extra="slabPie.extra"
											 :opts="slabPie.opts"
											 :ref="slabPie.id" />
										</view>
										<view class="width100 margin-tb-auto">
											<view class="flex echarts-legend-height dashed-bottom" :class="item.classname" v-for="(item,index) in slabList" :key="index">
												<view class="basic-default">{{item.classification}}</view>
												<view class="basis-sm">{{item.tonnes}}万吨</view>
												<view class="basic-default">{{item.percentage}}%</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import { post } from "@/lib/Util.js";
	import uCharts from '@/components/u-charts/component.vue';
	import {GET_HOME_PRODCUT_STATISTICS_INFO, GET_HOME_INVENTORYSTATISTICS_INFO} from '@/common/api/home.js'
	export default {
		components: {
			uCharts
		},
		data() {
			return {
				elements: [{
						title: '生产概要',
						pagePath: '/pages/modules/prodSum/index',
						name: 'layout',
						color: 'text-blue',
						cuIcon: 'shengchangaiyao'
					},
					{
						title: '订单信息',
						name: 'background',
						pagePath: '/pages/modules/order/index',
						color: 'text-blue',
						cuIcon: 'dingdanxinxi'
					},
					{
						title: '生产计划',
						name: 'text',
						color: 'text-yellow',
						pagePath: '/pages/modules/plan/index',
						cuIcon: 'shengchanjihua'
					},
					{
						title: '设备监控',
						name: 'icon',
						color: 'text-red',
						cuIcon: 'shebeijiankong',
						pagePath: '/pages/modules/equipment/index'
					},
					{
						title: '通信监控',
						name: 'button',
						color: 'text-red',
						cuIcon: 'tongxinjiankong',
						pagePath: '/pages/modules/communication/index'
					},
					{
						title: '轧制监控',
						name: 'tag',
						color: 'text-red',
						cuIcon: 'yazhijiankong',
						pagePath: '/pages/modules/rollLine/index'
					},
					{
						title: '质量信息',
						name: 'avatar',
						color: 'text-blue',
						cuIcon: 'zhiliangxinxi',
						pagePath: '/pages/modules/quality/index',
					},
					{
						title: '原料库存',
						name: 'progress',
						color: 'text-blue',
						cuIcon: 'yuanliaokucun',
						pagePath: '/pages/modules/yuanliao/index',
					},
					{
						title: '成品库存',
						name: 'shadow',
						color: 'text-blue',
						cuIcon: 'chengpinkucun',
						pagePath: '/pages/modules/finish/index'
					},
					{
						title: '成本信息',
						name: 'loading',
						color: 'text-blue',
						cuIcon: 'chengbenxinxi',
						pagePath: '/pages/modules/cost/index'
					},
					{
						title: '轧辊统计',
						name: 'shadow',
						color: 'text-blue',
						cuIcon: 'gunhaotongji',
						pagePath: '/pages/modules/roll/index'
					},
					{
						title: '生产报表',
						name: 'loading',
						color: 'text-red',
						cuIcon: 'shengchanbaobiao',
						pagePath: '/pages/modules/prodReport/index'
					},
					{
						title: '能耗统计',
						name: 'loading',
						color: 'text-red',
						cuIcon: 'gunhaotongji',
						pagePath: '/pages/modules/jie/index'
					}
				],
				chanList: [
					{
						title: '小时统计',
						value: '00000',
						blocks: '00000',
						unit: '产量(t)',
						param: 'year'
					},
					{
						title: '当天统计',
						value: '00000',
						blocks: '00000',
						unit: '产量(t)',
						param: 'day'
					},
					{
						title: '当月统计',
						value: '00000',
						blocks: '00000',
						unit: '产量(t)',
						param: 'month'
					}
				],
				stockState: {
					opts: {
						series: [{
							name : "Q235B",
							data: 0,
							color: '#3088F4'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '成品库存', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "stock"
				},
				colorListBlock: ['block-blue', 'block-yellow', 'block-green', 'block-purple', 'block-orange', 'block-light-blue'],
				colorlist: ['#3088F4', '#ffb708', '#08d5a5', '#7130f4', '#f47073', '#0043fe'],
				stockList: [],
				planPie: {
					opts: {
						series: [{
							name : "Q235B",
							data: 0,
							color: '#3088F4'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '成品库存', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "planPie"
				},
				planList: [],
				slabPie: {
					opts: {
						series: [{
							name : "Q235B",
							data: 0,
							color: '#3088F4'
						}]
					},
					cWidth: uni.upx2px(250),
					cHeight: uni.upx2px(250),
					chartType: "ring",
					title: {name: '板坯库存', fontSize: 12,},
					extra: {
						pie: {
						  offsetAngle: 0,
						  ringWidth: 25,
						  labelWidth:0
						}
					},
					extraType: "",
					id: "slab"
				},
				slabList: []
			};
		},
		mounted() {
			this.getProd()
			this.getStockInfo()
			this.getSlabInfo()
			if(this.$store.state.pageInfo.length > 0) {
				this.elements = this.$store.state.pageInfo
			}
		},
		methods: {
			// 获取产量信息
			async getProd() {
				let res = await post(GET_HOME_PRODCUT_STATISTICS_INFO)
				if(res.code == 0) {
					this.chanList[0].value = Number(res.data.hour.yield / 1000).toFixed(2)
					this.chanList[0].blocks = res.data.hour.number
					
					this.chanList[1].value = Number(res.data.day.yield / 1000).toFixed(2)
					this.chanList[1].blocks = res.data.day.number
					
					this.chanList[2].value = Number(res.data.month.yield / 1000 / 10000).toFixed(2) + '万'
					this.chanList[2].blocks = res.data.month.number
				}
			},
			async getStockInfo() {
				let res = await post(GET_HOME_INVENTORYSTATISTICS_INFO, {
					type: 'product'
				})
				if(res.code == 0) {
					let data = [] // 图表数据
					let stock = [] // legend数据
					for(let i = 0; i<res.data.length; i++) {
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
						stock.push({
							classification: res.data[i].classification,
							tonnes: Number(Number(res.data[i].tonnes) / 10000).toFixed(2),
							percentage: res.data[i].percentage,
							classname: this.colorListBlock[i]
						})
					}
					this.stockState.opts.series = data
					this.stockList = stock
				}
			},
			async getSlabInfo() {
				let res = await post(GET_HOME_INVENTORYSTATISTICS_INFO, {
					type: 'slab'
				})
				if(res.code == 0) {
					let data = [] // 图表数据
					let stock = [] // legend数据
					for(let i = 0; i<res.data.length; i++) {
						data.push({
							name: res.data[i].classification,
							data: res.data[i].tonnes,
							color: this.colorlist[i]
						})
						stock.push({
							classification: res.data[i].classification,
							tonnes: Number(Number(res.data[i].tonnes) / 10000).toFixed(2),
							percentage: res.data[i].percentage,
							classname: this.colorListBlock[i]
						})
					}
					this.slabPie.opts.series = data
					this.slabList = stock
				}
			},
			goTeamPage() {
				uni.navigateTo({
					url: '/pages/modules/prodSum/index'
				})
			},
			goStockPage() {
				uni.navigateTo({
					url: '/pages/modules/finish/index'
				})
			},
			goYuanliaoPage() {
				uni.navigateTo({
					url: '/pages/modules/yuanliao/index'
				})
			}
		}
	}
</script>

<style>
	.page {
		height: 100vh;
	}
	.home-bg-img {
		position: relative;
	}
	.home-info {
		position: absolute;
		top: 106upx;
		left: 30upx;
		color: white;
		font-size: 22upx;
	}
	.home-info view:first-child {
		height: 50upx;
		font-size: 36upx;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 20upx;
	}
	.home-info view {
		height: 30upx;
		line-height: 30upx;
	}
	.home-set {
		position: absolute;
		top: 62upx;
		right: 30upx;
		font-size: 46upx;
		color: white;
	}
	.home-new {
		position: absolute;
		bottom: 0;
		padding: 0 30upx;
		width: 100%;
		box-sizing: border-box;
	}
	.home-new-info {
		height: 108upx;
		padding: 10upx 20upx;
		background-color: white;
		border-radius: 6px;
		display: flex;
		font-size: 22upx;
		box-shadow: 0px 6px 9px 0px rgba(0,0,0,0.16); 
	}
	.home-new-info-title {
		color: #3088F4;
		font-size: 34upx;
		width: 70upx;
		font-weight: Bold;
	}
	.home-new-info-line {
		width: 1px;
		border-left: 1px dashed #707070;
		margin: 0 10upx;
	}
	.home-new-info-contont {
		width: auto;
		max-width: 550upx;
		padding: 14upx 0;
		font-weight: 400;
		text-align: left;
		color: rgba(0,0,0,0.60);
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.u-main-info .chan-item {
		width: 33%;
		padding-left: 20upx;
		border-right: 1px dashed rgba(0,0,0,0.50);
	}
	.u-main-info .chan-item:last-child{
		border-right: none;
	}
	.team-info-realNow {
		margin-right: 10upx;
	}
	.chan-item-title {
		height: 40upx;
		font-size: 28upx;
		line-height: 40upx;
		margin-bottom: 20upx;
	}
	.chan-item-value {
		height: 56upx;
		font-size: 40upx;
	}
	.chan-item-name {
		height: 33upx;
		font-size: 24upx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		text-align: left;
		color: rgba(0,0,0,0.60);
		margin-bottom: 10upx;
	}
</style>
